<template>
  <div class="enhanced-editor">
    <!-- 编辑器容器 -->
    <div class="editor-container" :style="containerStyles">
      <div class="editor" ref="editor" :style="editorStyles"></div>
    </div>
  </div>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";
import ImageResize from 'quill-image-resize-module'

// 注册图片调整模块
Quill.register('modules/imageResize', ImageResize)

// 导入Quill的格式模块
const Size = Quill.import('attributors/style/size');
const Font = Quill.import('formats/font');

// 自定义字体大小选项
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '48px'];
Quill.register(Size, true);

// 自定义字体类型
Font.whitelist = [
  'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial',
  'Times-New-Roman', 'Courier-New', 'Verdana', 'Georgia', 'Comic-Sans-MS'
];
Quill.register(Font, true);

// 添加字体样式
const style = document.createElement('style');
style.innerHTML = `
  @layer utilities {
    .ql-font-SimSun { font-family: "SimSun", "宋体", serif; }
    .ql-font-SimHei { font-family: "SimHei", "黑体", sans-serif; }
    .ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei", "微软雅黑", sans-serif; }
    .ql-font-KaiTi { font-family: "KaiTi", "楷体", serif; }
    .ql-font-FangSong { font-family: "FangSong", "仿宋", serif; }
    .ql-font-Arial { font-family: "Arial", sans-serif; }
    .ql-font-Times-New-Roman { font-family: "Times New Roman", serif; }
    .ql-font-Courier-New { font-family: "Courier New", monospace; }
    .ql-font-Verdana { font-family: "Verdana", sans-serif; }
    .ql-font-Georgia { font-family: "Georgia", serif; }
    .ql-font-Comic-Sans-MS { font-family: "Comic Sans MS", cursive; }
  }
`;
document.head.appendChild(style);

export default {
  name: "EnhancedEditor",
  props: {
    value: { type: String, default: "" },
    height: { type: Number, default: null },
    minHeight: { type: Number, default: 32 }, // element-input高度
    maxHeight: { type: Number, default: null },
    readOnly: { type: Boolean, default: false },
    fileSize: { type: Number, default: 1 },
    type: { type: String, default: "url" },
    placeholder: { type: String, default: "请输入内容..." },
    showToolbar: { type: Boolean, default: true },
    enableImageResize: { type: Boolean, default: true }
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: { Authorization: "Bearer " + getToken() },
      Quill: null,
      currentValue: "",
      options: {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        modules: {
          toolbar: this.getToolbarConfig(),
          imageResize: this.enableImageResize ? {
            displayStyles: {
              backgroundColor: 'black',
              borderStyle: 'solid',
              borderColor: 'black',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          } : false
        },
        placeholder: this.placeholder,
        readOnly: this.readOnly,
      }
    };
  },
  computed: {
    containerStyles() {
      let style = {
        border: '1px solid #dcdfe6',
        borderRadius: '4px',
        // overflow: 'auto'
      };
      if (this.minHeight) style.minHeight = `${this.minHeight}px`;
      if (this.maxHeight) style.maxHeight = `${this.maxHeight}px`;
      return style;
    },
    editorStyles() {
      // element-input高度为32px，padding 0
      let style = {
        height: '32px',
        minHeight: '32px',
        padding: '0',
        height:'100%'
      };
      // if (this.height) style.height = `${this.height}px`;
      return style;
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? "" : val;
          if (this.Quill) {
            this.Quill.clipboard.dangerouslyPasteHTML(this.currentValue);
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.Quill = null;
  },
  methods: {
    getToolbarConfig() {
      if (!this.showToolbar) return false;
      // 只保留字体和字号
      return [
        [{'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']}],
        [{'size': ['12px', '14px', '16px', '20px', '24px', '32px']}]
      ];
    },
    init() {
      const editor = this.$refs.editor;
      this.Quill = new Quill(editor, this.options);

      // 设置初始内容
      this.Quill.clipboard.dangerouslyPasteHTML(this.currentValue);

      // 监听内容变化
      this.Quill.on("text-change", (delta, oldDelta, source) => {
        const html = this.$refs.editor.children[0].innerHTML;
        const text = this.Quill.getText();
        const quill = this.Quill;
        this.currentValue = html;
        this.$emit("input", html);
        this.$emit("on-change", { html, text, quill });
      });

      // 监听选择变化，确保图片调整后能正确更新内容
      this.Quill.on("selection-change", (range, oldRange, source) => {
        if (!range && oldRange) {
          // 当失去焦点时，更新内容以确保图片调整被保存
          this.currentValue = this.$refs.editor.children[0].innerHTML;
          this.$emit("input", this.currentValue);
        }
      });
    },
    // 获取编辑器内容
    getContent() {
      // 确保获取到最新的内容，包括图片调整后的状态
      if (this.Quill) {
        const html = this.$refs.editor.children[0].innerHTML;
        this.currentValue = html;
        return html;
      }
      return this.currentValue;
    },
    // 设置编辑器内容
    setContent(content) {
      this.currentValue = content || "";
      if (this.Quill) {
        this.Quill.clipboard.dangerouslyPasteHTML(this.currentValue);
      }
    },
    // 清空编辑器
    clear() {
      this.setContent("");
    },
    // 获取纯文本内容
    getText() {
      return this.Quill ? this.Quill.getText() : "";
    }
  },
};
</script>

<style scoped>
.enhanced-editor {
  width: 100%;
}

.editor-container {
  background: #fff;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

}

.editor-container:hover {
  border-color: #c0c4cc;
}

.editor-container:focus-within {
  border-color: #409eff;
}

.editor {
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  line-height: 1.6;
  min-height: 32px;
  height: 32px;
  padding: 0;
  /* 让内容垂直居中 */
  display: flex;
  align-items: center;
}

/* 工具栏样式优化 */
.ql-toolbar {
  border-bottom: 1px solid #dcdfe6;
  background: #f8f9fa;
  min-height: 32px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
}

.ql-toolbar .ql-formats {
  margin-right: 8px;
  margin-bottom: 0;
}

.ql-container {
  border: none;
  font-size: 14px;
  min-height: 32px;
  height: 32px;
  padding: 0;
}

/* 编辑器内容区域样式 */
.ql-editor {
  min-height: 32px;
  height: 32px;
  padding: 0 8px;
  line-height: 32px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.ql-editor p {
  margin: 0;
  text-indent: 0;
  line-height: 32px;
}

.ql-editor h1, .ql-editor h2, .ql-editor h3,
.ql-editor h4, .ql-editor h5, .ql-editor h6 {
  margin: 0;
  font-weight: bold;
  line-height: 32px;
}

.ql-editor blockquote {
  border-left: 4px solid #409eff;
  padding-left: 8px;
  margin: 0;
  color: #666;
  background: #f8f9fa;
  padding: 0 8px;
  border-radius: 0 4px 4px 0;
  line-height: 32px;
}

.ql-editor img {
  max-width: 100%;
  height: 24px;
  border-radius: 4px;
  margin: 0 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

/* 字体选择器样式 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun", serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei", sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei", sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi", serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong", serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial", sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman", serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Courier-New]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Courier-New]::before {
  content: "Courier New";
  font-family: "Courier New", monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Verdana]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Verdana]::before {
  content: "Verdana";
  font-family: "Verdana", sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Georgia]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Georgia]::before {
  content: "Georgia";
  font-family: "Georgia", serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Comic-Sans-MS]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Comic-Sans-MS]::before {
  content: "Comic Sans MS";
  font-family: "Comic Sans MS", cursive;
}

/* 字号选择器样式 */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "24px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
  content: "36px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
  content: "48px";
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ql-toolbar {
    flex-wrap: wrap;
  }

  .ql-toolbar .ql-formats {
    margin-right: 8px;
    margin-bottom: 0;
  }
}


.ql-editor {
  width: 100%;
}
</style>


<!-- 全局样式，修复弹窗内编辑器下拉框显示问题 -->
<style>
/* 修复Quill编辑器下拉框在弹窗内的显示问题 */
.ql-snow .ql-picker {
  z-index: 9999 !important;
}

.ql-snow .ql-picker-options {
  z-index: 9999 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
}

/* 确保下拉框在弹窗内正确显示 */
.el-dialog .ql-snow .ql-picker {
  z-index: 9999 !important;
}

.el-dialog .ql-snow .ql-picker-options {
  z-index: 9999 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  background: white !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 确保编辑器容器不会裁剪下拉框 */
.el-dialog .enhanced-editor {
  overflow: visible !important;
}

.el-dialog .editor-container {
  overflow: visible !important;
}
</style>
